<template>
  <div class="eCharts_2">
    <div id="top">
      <div id="top_left"></div>
      <div id="top_right"></div>
    </div>
    <div id="bottom"></div>
  </div>
</template>

<script>
  import data1 from '../../../apiData/screen/userCompare.js'
  import data2 from '../../../apiData/screen/userArea.js'
  import data3 from '../../../apiData/screen/platformTraffic.js'
  export default {
    name: "eCharts_2",
    data() {
      return {
        myChart1: null,
        myChart2: null,
        myChart3: null,
        data1: {},
        data2: {},
        data3: {}
      }
    },
    created() {
      this.data1 = data1;
      this.data2 = data2;
      this.data3 = data3;
      this.$nextTick(() => {
        this.drawChart1();
        this.drawChart2();
        this.drawChart3();
      });
    },
    mounted() {
      window.onresize = () => (() => {
        this.drawChart1();
        this.drawChart2();
        this.drawChart3();
      })();
    },
    methods: {
      drawChart1() {
        // 基于准备好的dom，初始化eCharts实例
        if(this.myChart1 !== null && this.myChart1 !== '' && this.myChart1 !== undefined) {
          this.myChart1.dispose();  // 销毁
        }
        this.myChart1 = this.$echarts.init(document.getElementById('top_left'));
        let option = {
          title: {
            text: '新老用户占比',
            padding: [10,10,10,10],
            textStyle:{
              color:'rgba(255,255,255,0.7)',
              fontWeight:'500',
              fontSize: 16
            }
          },
          // color: ['#f00', '#0f0', '#00f'],
          tooltip: {
            trigger: 'axis',
            backgroundColor:'rgba(0,0,0,0.6)',
            borderColor: 'rgba(0,0,0,0)',
            textStyle:{
              color:'#ddd',
              fontSize:13
            },
            formatter: this.setTooltip1
          },
          legend: {
            data: ['上周', '昨日', '今日'],
            textStyle: {  // 图例的字体样式
              color: '#fff'
            },
            left: 20, // 图例居右位置
            bottom: 7  // 图例居上位置
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '20%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              axisLine: {
                lineStyle: {
                  color: "#333"
                }
              },
              axisLabel: {
                color: "#666",
                fontSize: "10px"
              },
              data: this.data1.categories
            }
          ],
          yAxis: [
            {
              type: 'value',
              splitLine: {
                show: false
              },
              axisLabel: {
                color: "#666",
                fontSize: "10px",
                formatter:function(value){
                  if (value >= 10000) {
                    return value / 10000 + '万'
                  }else{
                    return value
                  }
                }
              }
            }
          ],
          series: [
            {
              name: '上周',
              type: 'line',
              stack: 'Total',
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(219, 113, 30, 0.7)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(219, 113, 30, 0.3)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              areaStyle: {},
              showSymbol: false,
              data: this.data1.series[0].data
            },
            {
              name: '昨日',
              type: 'line',
              stack: 'Total',
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(52, 167, 72, 0.7)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(52, 167, 72, 0.3)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              areaStyle: {},
              showSymbol: false,
              data: this.data1.series[1].data
            },
            {
              name: '今日',
              type: 'line',
              stack: 'Total',
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [{
                  offset: 0, color: 'rgba(0, 126, 250, 0.7)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(0, 126, 250, 0.3)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              areaStyle: {},
              showSymbol: false,
              data: this.data1.series[2].data
            }
          ]
        };
        option && this.myChart1.setOption(option);
      },
      drawChart2() {
        // 基于准备好的dom，初始化eCharts实例
        if(this.myChart2 !== null && this.myChart2 !== '' && this.myChart2 !== undefined) {
          this.myChart2.dispose();  // 销毁
        }
        this.myChart2 = this.$echarts.init(document.getElementById('top_right'));
        let option = {
          title: {
            text: '用户区域分布',
            padding: [10,10,10,10],
            textStyle:{
              color:'rgba(255,255,255,0.7)',
              fontWeight:'500',
              fontSize: 16
            }
          },
          tooltip: {
            trigger: 'item',
            backgroundColor:'rgba(0,0,0,0.6)',
            borderColor: 'rgba(0,0,0,0)',
            textStyle:{
              color:'#ddd',
              fontSize:13
            },
            formatter: this.setTooltip2
          },
          color: ['#f3981d', '#38b55e', '#0061ff', '#a626a6', '#e56042', '#8ad945', '#1dbdc9'],
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['40%', '58%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '20',
                  formatter: (params) => {
                    let data = params;
                    return data.name
                  }
                }
              },
              labelLine: {
                show: false
              },
              data: this.data2
            }
          ]
        };
        option && this.myChart2.setOption(option);

        let timer1 = setTimeout(() => {
          let total = this.data2.length;
          let count = 0;
          this.autoHover(0,total);
          let timer = setInterval(() => {
            count ++;
            if(count < total) {
              this.autoHover(count,total);
            }else{
              count = 0;
              this.autoHover(count,total);
            }
          }, 3000);
          clearTimeout(timer1)
        },3000)
      },
      drawChart3() {
        // 基于准备好的dom，初始化eCharts实例
        if(this.myChart3 !== null && this.myChart3 !== '' && this.myChart3 !== undefined) {
          this.myChart3.dispose();  // 销毁
        }
        this.myChart3 = this.$echarts.init(document.getElementById('bottom'));
        let option = {
          color: ['#f37b1d', '#38b54a', '#0080ff'],
          title: {
            text: '各平台流量',
            padding: [10,10,10,10],
            textStyle:{
              color:'rgba(255,255,255,0.7)',
              fontWeight:'500',
              fontSize: 16
            }
          },
          tooltip: {
            trigger: 'axis',
            backgroundColor:'rgba(0,0,0,0.6)',
            borderColor: 'rgba(0,0,0,0)',
            textStyle:{
              color:'#ddd',
              fontSize:13
            },
            formatter: this.setTooltip3,
            axisPointer: {
              type: 'line',
              lineStyle: {
                color: 'rgba(6, 78, 156, 0.8)',
                width: 1,
                type: 'dashed'
              },
            }
          },
          legend: {
            show: false
          },
          singleAxis: {
            top: 50,
            bottom: 50,
            axisTick: {},
            axisLabel: {},
            type: 'time',
            axisPointer: {
              animation: true,
              label: {
                show: false
              }
            },
            splitLine: {
              show: false
            }
          },
          series: [
            {
              type: 'themeRiver',
              label: {
                show: false
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 20,
                  shadowColor: 'rgba(0, 0, 0, 0.8)'
                }
              },
              data: this.data3.data
            }
          ]
        };
        option && this.myChart3.setOption(option);
      },
      setTooltip1() {
        let data = arguments[0];
        let date = arguments[0][0].name;
        return `
          <div class="tooltip">
            <p><b style="font-size:15px;">${date}</b></p>
            <p class="tooltip_style"><span class="block" style="background: #f37b1d"></span><span class="tooltip_left">${data[0].seriesName}：</span><span class="tooltip_right">${data[0].data}</span></p>
            <p class="tooltip_style"><span class="block" style="background: #38b54a"></span><span class="tooltip_left">${data[1].seriesName}：</span><span class="tooltip_right">${data[1].data}</span></p>
            <p class="tooltip_style"><span class="block" style="background: #0080ff"></span><span class="tooltip_left">${data[2].seriesName}：</span><span class="tooltip_right">${data[2].data}</span></p>
            <p class="tooltip_style"><span class="tooltip_left">合计：</span><span class="tooltip_right">${data[0].data + data[1].data + data[2].data}</span></p>
          </div>
        `
      },
      setTooltip2() {
        let data = arguments[0];
        return `
          <div class="tooltip">
            <p class="tooltip_style"><span class="tooltip_left">${data.name}：</span><span class="tooltip_right">${data.percent}%(${data.value})</span></p>
          </div>
        `
      },
      setTooltip3() {
        let data = arguments[0];
        let date = arguments[0][0].data[0];
        return `
          <div class="tooltip">
            <p><b style="font-size:15px;">${date}</b></p>
            <p class="tooltip_style"><span class="block" style="background: #f37b1d"></span><span class="tooltip_left">${data[0].data[2]}：</span><span class="tooltip_right">${data[0].data[1]}</span></p>
            <p class="tooltip_style"><span class="block" style="background: #38b54a"></span><span class="tooltip_left">${data[1].data[2]}：</span><span class="tooltip_right">${data[1].data[1]}</span></p>
            <p class="tooltip_style"><span class="block" style="background: #0080ff"></span><span class="tooltip_left">${data[2].data[2]}：</span><span class="tooltip_right">${data[2].data[1]}</span></p>
            <p class="tooltip_style"><span class="tooltip_left">合计：</span><span class="tooltip_right">${data[0].data[1] + data[1].data[1] + data[2].data[1]}</span></p>
          </div>
        `;
      },
      autoHover(dataIndex,total) {
        if(dataIndex>0) {
          this.myChart2.dispatchAction({type: 'downplay', seriesIndex: 0, dataIndex: dataIndex-1});  // 取消上一个高亮
        }
        if(dataIndex === 0) {
          this.myChart2.dispatchAction({type: 'downplay', seriesIndex: 0, dataIndex: total-1});
        }
        this.myChart2.dispatchAction({type: 'highlight', seriesIndex: 0, dataIndex: dataIndex});  // 高亮当前图形
        this.myChart2.dispatchAction({type: 'showTip', seriesIndex: 0, dataIndex: dataIndex});
      }
    }
  }
</script>

<style scoped lang="scss">
  .eCharts_2 {
    width: 100%;
    height: 100%;
    padding: 20px;
    #top{
      height: 50%;
      display: flex;
      #top_left,
      #top_right{
        width: 50%;
      }
    }
    #bottom{
      height: 50%;
    }
  }
  /deep/ .tooltip{
    .tooltip_style{
      display: flex;
      align-items: center;
      .block{
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 3px;
      }
      .tooltip_left,
      .tooltip_right{
        display: inline-block;
        font-size: 13px;
      }
    }
  }
</style>
